<template>
  <div class="latest-view">
    <app-header />
    
    <main class="container">
      <div class="page-header">
        <h1>最新表情包</h1>
        <p>已收录 <span class="total-count">{{ totalItems }}</span> 个表情包</p>
      </div>
      
      <meme-grid 
        :memes="memes"
        :is-loading="isLoading"
        :has-next-page="hasNextPage"
        :empty-message="'暂时没有表情包上传。成为第一个上传者！'"
        @load-more="loadMore"
      />
      
      <div class="pagination-wrapper" v-if="totalPages > 1">
        <va-pagination
          v-model="currentPage"
          :pages="totalPages"
          :visible-pages="5"
          color="primary"
          @update:modelValue="onPageChange"
        />
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import AppHeader from '../components/AppHeader.vue'
import MemeGrid from '../components/MemeGrid.vue'
import { fetchLatestMemes } from '../api/memes'

const memes = ref([])
const isLoading = ref(false)
const totalItems = ref(0)
const currentPage = ref(1)
const perPage = 12 // 4列 x 3行
const totalPages = ref(0)

const hasNextPage = computed(() => currentPage.value < totalPages.value)

onMounted(() => {
  loadLatestMemes()
})

watch(currentPage, () => {
  loadLatestMemes()
})

async function loadLatestMemes() {
  if (isLoading.value) return
  
  isLoading.value = true
  
  try {
    const response = await fetchLatestMemes({
      page: currentPage.value,
      limit: perPage
    })
    
    memes.value = response.data.memes
    totalItems.value = response.data.pagination.totalItems
    totalPages.value = response.data.pagination.totalPages || Math.ceil(totalItems.value / perPage)
  } catch (error) {
    console.error('加载最新表情包失败:', error)
    // 演示用模拟数据
    memes.value = getMockMemes(perPage)
    totalItems.value = 100
    totalPages.value = 9
  } finally {
    isLoading.value = false
  }
}

function onPageChange(page) {
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

function loadMore() {
  if (hasNextPage.value && !isLoading.value) {
    currentPage.value++
  }
}

// 生成模拟表情包数据的辅助函数
function getMockMemes(count) {
  return Array.from({ length: count }, (_, i) => ({
    id: `mock-${currentPage.value * 100 + i}`,
    title: `搞笑表情包 ${currentPage.value * 100 + i + 1}`,
    imageUrl: `https://picsum.photos/seed/${currentPage.value * 100 + i + 1}/400/300`,
    likes: Math.floor(Math.random() * 1000),
    views: Math.floor(Math.random() * 10000),
    createdAt: new Date(Date.now() - Math.floor(Math.random() * 1000000000)).toISOString()
  }))
}
</script>

<style scoped>
.latest-view {
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

.page-header {
  margin-bottom: 2rem;
}

.page-header h1 {
  margin-bottom: 0.5rem;
}

.page-header p {
  color: var(--va-text-secondary);
}

.total-count {
  font-weight: 500;
  color: var(--va-primary);
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .container {
    padding: 1rem;
  }
}
</style> 